<template>
    <div class="order">
        <div class="layout-breadcrumb">
            <Breadcrumb>
                <Breadcrumb-item href="/index">
                    <Icon type="ios-home"></Icon> 首页
                </Breadcrumb-item>
                <Breadcrumb-item href="/order">订单</Breadcrumb-item>
            </Breadcrumb>
        </div>
        <div class="layout-main">
            <div class="search-bar">
                <Form ref="formInline" inline>
                    <Form-item>
                        <Input type="text" placeholder="关键字/地址"></Input>
                    </Form-item>
                    <Form-item>
                        <Input type="text" placeholder="手机号"></Input>
                    </Form-item>
                    <Form-item>
                        <Checkbox-group>
                            <Checkbox label="吃饭"></Checkbox>
                            <Checkbox label="睡觉"></Checkbox>
                            <Checkbox label="跑步"></Checkbox>
                            <Checkbox label="看电影"></Checkbox>
                        </Checkbox-group>
                    </Form-item>
                    <Form-item >
                        <Button type="primary" icon="ios-search">Search</Button>
                    </Form-item>
                    <Form-item class="search-action">
                        <Button type="primary" @click="exportData(1)">
                            <Icon type="ios-download-outline"></Icon> 导出原始数据</Button>
                        <Button type="primary" @click="exportData(2)">
                            <Icon type="ios-download-outline"></Icon> 导出排序和过滤后的数据</Button>
                        <Button type="primary" @click="exportData(3)">
                            <Icon type="ios-download-outline"></Icon> 导出自定义数据</Button>
                    </Form-item>
                </Form>
            </div>
            <Table border :columns="columns8" :data="data7" size="small" ref="table"></Table>
            <Page class="layout-pager" :total="100" :page-size="15" show-total show-elevator></Page>
        </div>
    </div>
</template>
<script>

export default {
    data() {
        return {
            columns8: [
                {
                    title: '名称',
                    key: 'name',
                    fixed: 'left',
                },
                {
                    title: '展示',
                    key: 'show',
                    sortable: true,
                    filters: [
                        {
                            label: '大于4000',
                            value: 1,
                        },
                        {
                            label: '小于4000',
                            value: 2,
                        },
                    ],
                    filterMultiple: false,
                    filterMethod(value, row) {
                        if (value === 1) {
                            return row.show > 4000;
                        } else if (value === 2) {
                            return row.show < 4000;
                        }
                    },
                },
                {
                    title: '唤醒',
                    key: 'weak',
                    sortable: true,
                },
                {
                    title: '登录',
                    key: 'signin',
                    sortable: true,
                },
                {
                    title: '点击',
                    key: 'click',
                    sortable: true,
                },
                {
                    title: '激活',
                    key: 'active',
                    sortable: true,
                },
                {
                    title: '7日留存',
                    key: 'day7',
                    sortable: true,
                },
                {
                    title: '30日留存',
                    key: 'day30',
                    sortable: true,
                },
                {
                    title: '次日留存',
                    key: 'tomorrow',
                    sortable: true,
                },
                {
                    title: '日活跃',
                    key: 'day',
                    sortable: true,
                },
                {
                    title: '周活跃',
                    key: 'week',
                    sortable: true,
                },
                {
                    title: '月活跃',
                    key: 'month',
                    sortable: true,
                },
                {
                    title: '操作',
                    key: 'action',
                    width: 150,
                    align: 'center',
                    render(row, column, index) {
                        return `<i-button type="primary" size="small" @click="show(${index})">查看</i-button> <i-button type="error" size="small" @click="remove(${index})">删除</i-button>`;
                    },
                },
            ],
            data7: [
                {
                    name: '推广名称1',
                    fav: 0,
                    show: 7302,
                    weak: 5627,
                    signin: 1563,
                    click: 4254,
                    active: 1438,
                    day7: 274,
                    day30: 285,
                    tomorrow: 1727,
                    day: 558,
                    week: 4440,
                    month: 5610,
                },
                {
                    name: '推广名称2',
                    fav: 0,
                    show: 4720,
                    weak: 4086,
                    signin: 3792,
                    click: 8690,
                    active: 8470,
                    day7: 8172,
                    day30: 5197,
                    tomorrow: 1684,
                    day: 2593,
                    week: 2507,
                    month: 1537,
                },
                {
                    name: '推广名称3',
                    fav: 0,
                    show: 7181,
                    weak: 8007,
                    signin: 8477,
                    click: 1879,
                    active: 16,
                    day7: 2249,
                    day30: 3450,
                    tomorrow: 377,
                    day: 1561,
                    week: 3219,
                    month: 1588,
                },
                {
                    name: '推广名称4',
                    fav: 0,
                    show: 9911,
                    weak: 8976,
                    signin: 8807,
                    click: 8050,
                    active: 7668,
                    day7: 1547,
                    day30: 2357,
                    tomorrow: 7278,
                    day: 5309,
                    week: 1655,
                    month: 9043,
                },
                {
                    name: '推广名称5',
                    fav: 0,
                    show: 934,
                    weak: 1394,
                    signin: 6463,
                    click: 5278,
                    active: 9256,
                    day7: 209,
                    day30: 3563,
                    tomorrow: 8285,
                    day: 1230,
                    week: 4840,
                    month: 9908,
                },
                {
                    name: '推广名称6',
                    fav: 0,
                    show: 6856,
                    weak: 1608,
                    signin: 457,
                    click: 4949,
                    active: 2909,
                    day7: 4525,
                    day30: 6171,
                    tomorrow: 1920,
                    day: 1966,
                    week: 904,
                    month: 6851,
                },
                {
                    name: '推广名称7',
                    fav: 0,
                    show: 5107,
                    weak: 6407,
                    signin: 4166,
                    click: 7970,
                    active: 1002,
                    day7: 8701,
                    day30: 9040,
                    tomorrow: 7632,
                    day: 4061,
                    week: 4359,
                    month: 3676,
                },
                {
                    name: '推广名称8',
                    fav: 0,
                    show: 862,
                    weak: 6520,
                    signin: 6696,
                    click: 3209,
                    active: 6801,
                    day7: 6364,
                    day30: 6850,
                    tomorrow: 9408,
                    day: 2481,
                    week: 1479,
                    month: 2346,
                },
                {
                    name: '推广名称9',
                    fav: 0,
                    show: 567,
                    weak: 5859,
                    signin: 128,
                    click: 6593,
                    active: 1971,
                    day7: 7596,
                    day30: 3546,
                    tomorrow: 6641,
                    day: 1611,
                    week: 5534,
                    month: 3190,
                },
                {
                    name: '推广名称10',
                    fav: 0,
                    show: 3651,
                    weak: 1819,
                    signin: 4595,
                    click: 7499,
                    active: 7405,
                    day7: 8710,
                    day30: 5518,
                    tomorrow: 428,
                    day: 9768,
                    week: 2864,
                    month: 5811,
                },
            ],
        };
    },
    methods: {
        exportData(type) {
            if (type === 1) {
                this.$refs.table.exportCsv({
                    filename: '原始数据',
                });
            } else if (type === 2) {
                this.$refs.table.exportCsv({
                    filename: '排序和过滤后的数据',
                    original: false,
                });
            } else if (type === 3) {
                this.$refs.table.exportCsv({
                    filename: '自定义数据',
                    columns: this.columns8.filter((col, index) => index < 4),
                    data: this.data7.filter((data, index) => index < 4),
                });
            }
        },
    },
};

</script>

<style scoped lang="less">

</style>
